<template>
  <div>
    {{options}}
    <div class="selctBox">
      <el-select
        class="selct"
        style="width:100%;"
        size="mini"
        :value="value"
        filterable
        remote
        multiple
        clearable
        reserve-keyword
        default-first-option
        :remote-method="remoteMethod"
        :loading="loading"
        :value-key="selKey"
        @change="selChange"
        no-data-text="无匹配项"
        placeholder="请输入后筛选或选择"
      >
        <el-option
          v-for="item in options"
          :key="item[selKey]"
          :label="item[selValue]"
          :value="item[selKey]"
        >
          <span style="float: left">{{ item[selKey] }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item[selValue] }}</span>
        </el-option>
      </el-select>

      <el-button size="mini" icon="el-icon-search" class="btn" @click="dialogOpen"></el-button>
    </div>
    <el-dialog
      ref="dialog"
      title
      custom-class="dialogCustom"
      :visible.sync="visible"
      width="90%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <template v-if="$slots.title">
        <span slot="title">
          <div>{{ title }}</div>
        </span>
      </template>
      <slot>
        <div class="table-container">
          <el-table
            ref="table"
            :data="list"
            border
            stripe
            size="mini"
            max-height="700"
            @row-click="rowClick"
            style="margin-top: 20px;width:100%"
          >
            <el-table-column label="ID" prop="id" min-width="100px"></el-table-column>
            <el-table-column label="姓名" prop="name" min-width="100px"></el-table-column>
          </el-table>
        </div>
      </slot>
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Array]
    }
  },
  model: {
    props: "value",
    event: "input"
  },
  data() {
    return {
      loading: false,
      options: [],
      visible: false,
      list: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
        { id: 4, name: "周六" }
      ],
      selKey: "id",
      selValue: "name"
    };
  },
  created() {},
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.name.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 值改变
    selChange(val) {
      this.$emit("input", val);
    },
    dialogOpen() {
      this.visible = true;
    },
    // 列表行点击
    rowClick(row) {
      console.log(row);
      this.$emit("rowClick", row.id);
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.selct >>> .el-input__inner {
  border: none !important;
}
.selctBox {
  border-radius: 4px;
  border: 1px solid #ccc;
  display: flex;
  width: 60%;
}
.btn {
  border-right: none;
  border-top: none;
  border-bottom: none;
  background: transparent;
}
</style>